import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter/services.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';

import '../../tools/ClipStarPath.dart';

class pet_page extends StatefulWidget {
  @override
  PetPage createState() => PetPage();
}

class PetPage extends State<pet_page> with SingleTickerProviderStateMixin {
  List card = [
    {
      "name": "白泽",
      "status": "已拥有",
      "img":
          "https://img1.baidu.com/it/u=2804737717,3397424581&fm=253&fmt=auto&app=138&f=JPEG",
      "desc": "您的神兽宝宝将于2022年5月6日返回天庭（如已开通自动续费，续费完成后，此时间会更新）",
      "intro":
          "mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm"
    },
    {
      "name": "黑狗1",
      "status": "未拥有",
      "img":
          "https://img1.baidu.com/it/u=2804737717,3397424581&fm=253&fmt=auto&app=138&f=JPEG",
      "desc": "您还未拥有此神兽",
      "intro": "mmmmmmmmmmmmmmmmmmmmmm"
    },
    {
      "name": "黑狗2",
      "status": "未拥有",
      "img":
          "https://img1.baidu.com/it/u=2804737717,3397424581&fm=253&fmt=auto&app=138&f=JPEG",
      "desc": "您还未拥有此神兽",
      "intro": "mmmmmmmmmmmmmmmmmmmmmm"
    },
    {
      "name": "黑狗3",
      "status": "未拥有",
      "img":
          "https://img1.baidu.com/it/u=2804737717,3397424581&fm=253&fmt=auto&app=138&f=JPEG",
      "desc": "您还未拥有此神兽",
      "intro": "mmmmmmmmmmmmmmmmmmmmmm"
    },
  ];

  int _current_card = 0;
  @override
  Ticker createTicker(onTick) {
    return Ticker(onTick, debugLabel: 'created by $this');
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark));
    return Scaffold(
      body: SafeArea(
          child: CustomScrollView(
        shrinkWrap: true,
        slivers: <Widget>[
          SliverPadding(
            padding: const EdgeInsets.all(20.0),
            sliver: SliverList(
              delegate: SliverChildListDelegate(
                <Widget>[
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    child: Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(top: 10),
                          child: SizedBox(
                            height: 400,
                            width: double.infinity,
                            child: Swiper(
                              itemBuilder: (BuildContext context, int index) {
                                return getCard(context, index);
                              },
                              itemCount: card.length,
                              autoplay: false,
                              loop: false,
                              pagination: const SwiperPagination(),
                              viewportFraction: 0.8,
                              scale: 0.9,
                              onIndexChanged: (i) {
                                setState(() {
                                  _current_card = i;
                                });
                              },
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 20, vertical: 10),
                          child: SizedBox(
                              width: double.infinity,
                              child: Text(card[_current_card]["desc"])),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 10),
                          child: getName(_current_card),
                        ),
                        Padding(
                          padding: const EdgeInsets.symmetric(vertical: 10),
                          child: SizedBox(
                              width: double.infinity,
                              child: Text(card[_current_card]["intro"])),
                        ),
                        Row(
                          children: [
                            RaisedButton(
                              onPressed: () {
                                Navigator.of(context)
                                    .pushNamed("getpetforfree");
                              },
                              child: Text("免费获取"),
                            ),
                            RaisedButton(
                              onPressed: () {
                                Navigator.of(context).pushNamed("getpet");
                              },
                              child: Text("付费获取"),
                            ),
                          ],
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      )),
    );
  }

  Widget getCard(BuildContext context, int index) {
    return Container(
      decoration: BoxDecoration(
          image: DecorationImage(
              image: Image.network(
                card[index]["img"],
                fit: BoxFit.cover,
              ).image,
              fit: BoxFit.cover),
          borderRadius: const BorderRadius.all(Radius.circular(5))),
      child: Padding(
        padding: const EdgeInsets.all(10),
        child: Wrap(
          children: [
            Container(
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(10)),
                color: Colors.white.withOpacity(0.8),
              ),
              child: Padding(
                padding: const EdgeInsets.all(5),
                child: Column(
                  children: [
                    Text(
                      card[index]["status"],
                      style: const TextStyle(
                          color: Colors.orange, fontWeight: FontWeight.w800),
                    ),
                    getName(index)
                  ],
                  crossAxisAlignment: CrossAxisAlignment.start,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  getName(int current_card) {
    return Row(
      children: [
        Text(
          card[current_card]["name"],
          style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
        ClipPath(
          clipper: ClipStarPath(),
          child: Container(
            width: 20,
            height: 20,
            color: Colors.red,
          ),
        )
      ],
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
    );
  }
}
